.bk {
cursor: pointer;
position: relative;
}
.bk:after,
.bk:before {
content: '';
display: block;
position: absolute;
border: 1px transparent solid;
width: 0;
height: 0;
box-sizing: border-box;
}
.bk:after {
left: 0;
top: 0;
transition: border-color 0s ease-in 0.8s, width 0.2s ease-in 0.6s, height 0.2s ease-in 0.4s;
}
.bk:before {
right: 0;
bottom: 0;
transition: border-color 0s ease-in 0.4s, width 0.2s ease-in 0.2s, height 0.2s ease-in 0s;
}
.bk:hover:after,
.bk:hover:before {
height: 100%;
width: 100%;
}
.bk:hover:after {
border-right-color: #1d79de;
border-top-color: #1d79de;
transition: width 0.2s ease-out 0s, height 0.2s ease-out 0.2s;
}
.bk:hover:before {
border-left-color: #1d79de;
border-bottom-color: #1d79de;
transition: border-color 0s ease-out 0.4s, width 0.2s ease-out 0.4s, height 0.2s ease-out 0.6s;
}
.contents {
width: 1200px;
margin: 0 auto;
}
.fl {
float: left;
}
.fr {
float: right;
}
.clearfix:after {
content: "";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
font-size: 0;
}
.yc {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tsy {
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.tsy:hover {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
.gd {
-webkit-transition: 0.5s;
transition: 0.5s;
}
.s180 {
transform: rotateY(0);
-webkit-transition: 0.5s;
transition: 0.5s;
}
.s180:hover {
transform: rotateY(108deg);
}
.img100 {
transform: scale(1);
-webkit-transition: 0.5s;
transition: 0.5s;
}
.img100:hover {
transform: scale(1.1);
}
.w100 {
width: 100%;
height: 100%;
object-fit: contain;
}
.yuas {
-webkit-animation: hang linear 2s infinite;
}
@-webkit-keyframes hang {
0%,
100% {
-webkit-transform: translate(0, -8px);
}
50% {
-webkit-transform: translate(0, 0);
}
}
.zyuo {
-webkit-animation: zyuo linear 2s infinite;
}
@keyframes zyuo {
16.65% {
-webkit-transform: translateX(6px);
transform: translateX(6px);
}
33.3% {
-webkit-transform: translateX(-5px);
transform: translateX(-5px);
}
49.95% {
-webkit-transform: translateX(4px);
transform: translateX(4px);
}
66.6% {
-webkit-transform: translateX(-2px);
transform: translateX(-2px);
}
83.25% {
-webkit-transform: translateX(1px);
transform: translateX(1px);
}
100% {
-webkit-transform: translateX(0);
transform: translateX(0);
}
}
.flex {
display: flex;
justify-content: space-between;
}
.box10 {
margin-top: 40px;
background: url(../images/b1.jpg) no-repeat center top;
background-position-y: 410px;
}
.box10 .plaet {
display: flex;
justify-content: space-between;
}
.box10 .plaet .z1 {
width: 160px;
}
.box10 .plaet .z1 .top .title {
font-size: 60px;
font-weight: bold;
color: #444;
}
.box10 .plaet .z1 .top .title i {
color: #1d79de;
font-weight: bold;
}
.box10 .plaet .z1 .top .h3 {
display: block;
font-size: 30px;
color: #444;
padding-right: 41px;
background: url(../images/title5.png) no-repeat center right;
width: 165px;
box-sizing: border-box;
}
.box10 .plaet .z1 .list {
width: 420px;
margin-top: 55px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.box10 .plaet .z1 .list a {
display: inline-block;
font-size: 15px;
color: #444;
padding-left: 26px;
width: 105px;
box-sizing: border-box;
background: url(../images/title2.png) no-repeat center left;
-webkit-transition: 0.5s;
transition: 0.5s;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
margin-bottom: 31px;
}
.box10 .plaet .z1 .list a:hover {
background: url(../images/title3.png) no-repeat center left;
}
.box10 .plaet .y1 {
width: 564px;
}
.box10 .plaet .y1 .sild10 {
position: relative;
}
.box10 .plaet .y1 .sild10 .bd li {
width: 564px;
}
.box10 .plaet .y1 .sild10 .bd li .img {
display: block;
width: 564px;
height: 444px;
overflow: hidden;
background: url(../images/title6.png) no-repeat center;
}
.box10 .plaet .y1 .sild10 .bd li .img img {
display: block;
width: 520px;
height: 401px;
margin: 22px;
border-radius: 30px 0 0 30px;
border: 3px solid #fff;
}
.box10 .plaet .y1 .sild10 .bd li .text {
width: 564px;
position: relative;
padding: 0 0 0 250px;
box-sizing: border-box;
}
.box10 .plaet .y1 .sild10 .bd li .text .title {
font-size: 16px;
line-height: 45px;
color: #fff;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
}
.box10 .plaet .y1 .sild10 .bd li .text .more {
display: block;
width: 20px;
height: 45px;
font-size: 24px;
color: #1d79de;
line-height: 50px;
position: absolute;
top: 0;
right: 35px;
}
.box10 .plaet .y1 .sild10 .hd {
width: 70px;
display: flex;
justify-content: space-between;
position: absolute;
top: 455px;
left: -448px;
}
.box10 .plaet .y1 .sild10 .hd li {
width: 16px;
height: 17px;
background: url(../images/cire3.png) no-repeat center;
text-indent: -99999px;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.box10 .plaet .y1 .sild10 .hd .on {
background: url(../images/cire4.png) no-repeat center;
}
.box10 .plaet .y1 .sild10 .next {
width: 64px;
height: 20px;
background: url(../images/next2.png) no-repeat center;
text-indent: -9999px;
position: absolute;
top: 455px;
left: -350px;
cursor: pointer;
}
.box10 .aside {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 65px;
}
.box10 .aside li {
width: 376px;
margin-bottom: 20px;
}
.box10 .aside li .img {
display: block;
width: 376px;
height: 281px;
border-radius: 10px;
overflow: hidden; border:1px solid #eee;
}
.box10 .aside li .img img {
width: 100%;
height: 100%;
object-fit: contain;
transform: scale(1);
-webkit-transition: 0.5s;
transition: 0.5s;
}
.box10 .aside li .img img:hover {
transform: scale(1.1);
}
.box10 .aside li .text {
width: 376px;
position: relative;
padding-right: 144px;
box-sizing: border-box;
}
.box10 .aside li .text .title {
font-size: 15px;
line-height: 53px;
color: #444;
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.box10 .aside li .text .more {
display: block;
width: 144px;
height: 53px;
background: url(../images/more1.png) no-repeat center;
font-size: 12px;
color: #999;
line-height: 53px;
position: absolute;
top: 0;
right: 0;
padding-left: 88px;
box-sizing: border-box;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.box10 .aside li:hover .text .more {
background: url(../images/more2.png) no-repeat center;
}
.box20 {
background: url(../images/b2.jpg) no-repeat center top;
margin-top: 30px;
padding-top: 70px;
}
.box20 .contents {
position: relative;
}
.box20 .top {
position: absolute;
top: 0;
left: 680px;
z-index: 20;
}
.box20 .top .zm {
font-size: 48px;
font-weight: bold;
color: #444;
height: 64px;
}
.box20 .top .zm i {
color: #1d79de;
font-weight: bold;
margin: 0 10px;
}
.box20 .top .title {
font-size: 18px;
line-height: 36px;
color: #555;
}
.box20 .sild20 {
position: relative;
}
.box20 .sild20 .bd li {
display: flex;
justify-content: space-between;
}
.box20 .sild20 .bd li .z1 {
width: 601px;
height: 451px;
}
.box20 .sild20 .bd li .z1 img {
width: 601px;
height: 451px;
}
.box20 .sild20 .bd li .y1 {
width: 512px;
margin-top: 175px;
}
.box20 .sild20 .bd li .y1 .title {
font-size: 24px;
font-weight: bold;
color: #444;
padding-left: 20px;
letter-spacing: 8px;
}
.box20 .sild20 .bd li .y1 .text {
font-size: 15px;
line-height: 32px;
color: #555;
margin-top: 40px;
}
.box20 .sild20 .hd {
width: 90px;
display: flex;
justify-content: space-between;
position: absolute;
top: 423px;
left: 769px;
}
.box20 .sild20 .hd li {
width: 8px;
height: 8px;
border-radius: 50%;
background: #777;
-webkit-transition: 0.5s;
transition: 0.5s;
text-indent: -99999px;
}
.box20 .sild20 .hd .on {
background: #1d79de;
}
.box20 .sild20 .arrow {
width: 272px;
display: flex;
justify-content: space-between;
position: absolute;
top: 401px;
left: 683px;
}
.box20 .sild20 .arrow .prev {
text-indent: -9999px;
width: 26px;
height: 48px;
cursor: pointer;
background: url(../images/prev3.png) no-repeat center;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.box20 .sild20 .arrow .prev:hover {
background: url(../images/prev4.png) no-repeat center;
}
.box20 .sild20 .arrow .next {
text-indent: -9999px;
width: 26px;
height: 48px;
cursor: pointer;
background: url(../images/next3.png) no-repeat center;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.box20 .sild20 .arrow .next:hover {
background: url(../images/next4.png) no-repeat center;
}
.box20 .list {
display: flex;
justify-content: space-between;
margin-top: 127px;
}
.box20 .list .a {
display: block;
width: 65px;
padding-top: 36px;
font-size: 16px;
color: #444;
background: url(../images/title2.png) no-repeat top center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}
.box30 {
background: url(../images/b3.jpg) no-repeat center top;
background-position-y: 70px;
padding-top: 92px;
box-sizing: border-box;
}
.box30 .plaet {
display: flex;
justify-content: space-between;
}
.box30 .plaet .z1 {
width: 463px;
}
.box30 .plaet .z1 .top {
width: 325px;
}
.box30 .plaet .z1 .top .zm {
font-family: Arial;
font-size: 48px;
color: #e5e5e5;
font-weight: bold;
line-height: 36px;
}
.box30 .plaet .z1 .top .zm i {
color: #1d79de;
font-weight: bold;
}
.box30 .plaet .z1 .top h3 {
font-size: 30px;
font-weight: bold;
color: #444;
line-height: 36px;
margin-top: 10px;
}
.box30 .plaet .z1 .top p {
font-size: 15px;
color: #777;
line-height: 36px;
}
.box30 .plaet .z1 .text p {
font-size: 15px;
color: #555;
line-height: 36px;
width: 463px;
margin-top: 60px;
}
.box30 .plaet .z1 .text span {
font-size: 18px;
color: #1d79de;
font-weight: bold;
}
.box30 .plaet .y1 {
width: 532px;
margin: 35px 33px 0 0;
}
.box30 .plaet .y1 .FOM .n {
border-radius: 6px;
position: relative;
padding: 0 0 0 42px;
box-sizing: border-box;
float: left;
margin-bottom: 32px;
}
.box30 .plaet .y1 .FOM .n img {
width: 80px;
height: 32px;
position: absolute;
top: 7px;
right: 7px;
}
.box30 .plaet .y1 .FOM .n input {
width: 100%;
height: 100%;
line-height: 46px;
background: none;
color: #989898;
}
.box30 .plaet .y1 .FOM .n ::-webkit-input-placeholder {
color: #989898;
}
.box30 .plaet .y1 .FOM .n textarea {
width: 100%;
height: 100%;
line-height: 50px;
background: none;
color: #989898;
}
.box30 .plaet .y1 .FOM .n textarea::placeholder {
color: #989898;
}
.box30 .plaet .y1 .FOM .n:nth-child(1) {
background: url(../images/f1.png) no-repeat center left;
background-position-x: 12px;
background-color: #fff;
width: 201px;
height: 50px;
margin-right: 30px;
}
.box30 .plaet .y1 .FOM .n:nth-child(2) {
background: url(../images/f2.png) no-repeat center left;
background-position-x: 12px;
background-color: #fff;
width: 301px;
height: 50px;
}
.box30 .plaet .y1 .FOM .n:nth-child(3) {
background: url(../images/f3.png) no-repeat center left;
background-position-x: 12px;
background-color: #fff;
width: 532px;
height: 50px;
}
.box30 .plaet .y1 .FOM .n:nth-child(4) {
background: url(../images/f4.png) no-repeat center left;
background-position-x: 12px;
background-color: #fff;
width: 281px;
height: 51px;
margin-right: 49px;
}
.box30 .plaet .y1 .FOM #btn {
float: left;
width: 201px;
font-weight: bold;
height: 51px;
background-color: #FFF;
border-radius: 30px 6px 30px 6px;
text-align: center;
line-height: 50px;
font-size: 18px;
color: #1d79de;
cursor: pointer;
}
.box30 .aside {
display: flex;
justify-content: space-between;
margin: 10px 8px 0 0;
}
.box30 .aside li {
width: 367px;
margin-bottom: 40px;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.box30 .aside li:hover {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
.box30 .aside li .img {
display: block;
width: 376px;
height: 281px;
background: #f5f5f5;
border-radius: 8px;
box-sizing: border-box;
overflow: hidden;
padding: 10px;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.box30 .aside li .img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}
.box30 .aside li .text {
position: relative;
background: url(../images/line.png) no-repeat left bottom;
}
.box30 .aside li .text .title {
display: block;
font-size: 15px;
line-height: 60px;
color: #444;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding-right: 100px;
}
.box30 .aside li .text .more {
display: block;
width: 19px;
height: 60px;
background: url(../images/more4.png) no-repeat center bottom;
right: 17px;
text-indent: -9999px;
position: absolute;
top: 0;
right: 0;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.box30 .aside li:nth-child(1) .text {
background: url(../images/line2.png) no-repeat left bottom;
}
.box30 .aside li:nth-child(1) .text .more {
background: url(../images/more5.png) no-repeat center;
}
.box30 .aside li:nth-child(3) .img {
background: #fff;
}
.box30 .aside li:nth-child(3) .text .title {
color: #fff;
}
.box40 {
height: 700px;
background: url(../images/b4.jpg) no-repeat center top;
margin-top: 50px;
}
.box40 .contents {
display: flex;
justify-content: space-between;
}
.box40 .z1 {
width: 701px;
}
.box40 .z1 .w {
width: 701px;
height: 501px;
}
.box40 .z1 .aside {
display: flex;
justify-content: space-between;
width: 515px;
margin-top: 17px;
}
.box40 .z1 .aside .rong {
display: block;
width: 251px;
height: 177px;
overflow: hidden;
}
.box40 .z1 .aside .rong img {
width: 100%;
height: 100%;
object-fit: contain;
transform: scale(1);
-webkit-transition: 0.5s;
transition: 0.5s;
}
.box40 .z1 .aside .rong img:hover {
transform: scale(1.1);
}
.box40 .z1 .aside .list {
font-size: 16px;
color: #555;
padding-top: 91px;
margin-top: 28px;
}
.box40 .z1 .aside .list:nth-child(2) {
background: url(../images/c1.png) no-repeat center top;
position: relative;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.box40 .z1 .aside .list:nth-child(2)::before {
content: "";
display: block;
width: 62px;
height: 63px;
position: absolute;
background: url(../images/c2.png) no-repeat center top;
top: 0;
left: 50%;
transform: translateX(-50%) rotateY(0deg);
opacity: 0;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.box40 .z1 .aside .list:nth-child(3) {
background: url(../images/c2.png) no-repeat center top;
position: relative;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.box40 .z1 .aside .list:nth-child(3)::before {
content: "";
display: block;
width: 62px;
height: 63px;
position: absolute;
background: url(../images/c4.png) no-repeat center top;
top: 0;
left: 50%;
transform: translateX(-50%) rotateY(0deg);
opacity: 0;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.box40 .z1 .aside .on:nth-child(2) {
background: none;
}
.box40 .z1 .aside .on:nth-child(2)::before {
transform: translateX(-50%) rotateY(180deg);
background: url(../images/c3.png) no-repeat center top;
opacity: 1;
}
.box40 .z1 .aside .on:nth-child(3) {
background: none;
}
.box40 .z1 .aside .on:nth-child(3)::before {
transform: translateX(-50%) rotateY(180deg);
background: url(../images/c4.png) no-repeat center top;
opacity: 1;
}
.box40 .y1 {
width: 420px;
position: relative;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.box40 .y1:hover {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
.box40 .y1 .zm {
font-size: 48px;
color: #555;
font-weight: bold;
margin-top: 32px;
}
.box40 .y1 .zm i {
color: #1d79de;
font-weight: bold;
}
.box40 .y1 h3 {
font-size: 24px;
color: #555;
}
.box40 .y1 .text {
width: 626px;
height: 426px;
background: url(../images/cb.png) no-repeat center top;
position: absolute;
top: 240px;
left: -195px;
padding: 89px;
box-sizing: border-box;
}
.box40 .y1 .text .title {
display: block;
width: 401px;
height: 51px;
border-radius: 25px;
border: 1px solid #d2d2d2;
box-sizing: border-box;
font-size: 20px;
color: #555;
text-align: center;
line-height: 51px;
position: relative;
}
.box40 .y1 .text .title::before {
content: "";
display: block;
width: 70px;
height: 70px;
position: absolute;
background: url(../images/title4.png) no-repeat center;
top: -10px;
left: -30px;
}
.box40 .y1 .text .title:hover::before {
-webkit-animation: zyuo linear 2s infinite;
}
.box40 .y1 .text p {
font-size: 15px;
color: #444;
line-height: 36px;
margin-top: 33px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
overflow: hidden;
height: 144px;
}
.box50 {
margin-top: 71px;
}
.box50 .top {
width: 155px;
}
.box50 .top .zm {
font-family: Arial;
font-size: 60px;
color: #444;
font-weight: bold;
line-height: 36px;
}
.box50 .top .zm i {
color: #1d79de;
font-weight: bold;
}
.box50 .top .h3 {
font-size: 30px;
color: #444;
line-height: 36px;
margin-top: 10px;
display: block;
background: url(../images/title5.png) no-repeat center right;
}
.box50 .sild30 {
margin-top: 40px;
position: relative;
}
.box50 .sild30 .bd ul {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.box50 .sild30 .bd ul li {
width: 376px;
height: 151px;
border-radius: 6px;
display: flex;
justify-content: space-between;
margin-bottom: 39px;
background: #f7f7f7;
padding: 41px 36px 0 31px;
box-sizing: border-box;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.box50 .sild30 .bd ul li .data {
width: 40px;
font-size: 14px;
line-height: 36px;
color: #999;
position: relative;
}
.box50 .sild30 .bd ul li .data::before {
content: "";
display: block;
width: 1px;
height: 66px;
position: absolute;
background: #dcdcdc;
top: 0;
right: -32px;
}
.box50 .sild30 .bd ul li .data i {
font-size: 30px;
color: #bbb;
display: block;
position: relative;
margin-bottom: 5px;
font-weight: bold;
}
.box50 .sild30 .bd ul li .data i::before {
content: "";
display: block;
width: 21px;
height: 1px;
position: absolute;
background: #c9c9c9;
top: 40px;
left: 0;
}
.box50 .sild30 .bd ul li .text {
width: 209px;
}
.box50 .sild30 .bd ul li .text .title {
font-size: 15px;
color: #444;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
line-height: 16px;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.box50 .sild30 .bd ul li .text p {
font-size: 13px;
color: #666;
line-height: 24px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
height: 48px;
margin-top: 10px;
}
.box50 .sild30 .bd ul li:hover {
background: none;
box-shadow: 0 0 1px 2px rgba(29, 212, 222, 0.09);
}
.box50 .sild30 .bd ul li:hover .text .title {
color: #1d79de;
}
.box50 .sild30 .hd {
position: absolute;
top: -120px;
right: 0;
width: 404px;
display: flex;
justify-content: space-between;
}
.box50 .sild30 .hd li a {
display: block;
font-size: 18px;
line-height: 62px;
padding-left: 29px;
width: 101px;
height: 62px;
position: relative;
}
.box50 .sild30 .hd li a::before {
content: "";
display: block;
width: 0;
height: 1px;
position: absolute;
background: #1d79de;
top: 0;
left: 0;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.box50 .sild30 .hd li a::after {
content: "";
display: block;
width: 0;
height: 1px;
position: absolute;
background: #1d79de;
bottom: 0;
left: 0;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.box50 .sild30 .hd li:nth-child(1) a {
background: url(../images/xico1.png) no-repeat center left;
}
.box50 .sild30 .hd li:nth-child(2) a {
background: url(../images/xico2.png) no-repeat center left;
}
.box50 .sild30 .hd li:nth-child(3) a {
background: url(../images/xico3.png) no-repeat center left;
}
.box50 .sild30 .hd .on a::before {
width: 101px;
}
.box50 .sild30 .hd .on a::after {
width: 101px;
}
.box60 {
height: 32px;
margin-top: 21px;
}
.box60 p {
width: 88px;
height: 31px;
background: url(../images/link.png) no-repeat center;
font-size: 16px;
line-height: 31px;
color: #fff;
float: left;
padding-left: 8px;
box-sizing: border-box;
font-weight: bold;
}
.box60 .lj {
float: right;
width: 1035px;
margin-left: 77px;
}
.box60 .lj a {
display: inline-block;
font-size: 14px;
line-height: 32px;
color: #444;
margin-right: 85px;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.box60 .lj a:hover {
color: #1d79de;
}